<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
<form layout:fragment="post-form">
    <input type="hidden" name="_method" value="PUT" th:if="${edit}"/>
    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

    <div class="columns">
        <div class="column is-three-quarters">
            <div class="field">
                <label class="label">Title</label>
                <div class="control">
                    <input class="input" th:classappend="(${#fields.hasErrors('title')}? ' is-danger')"
                           type="text" th:field="*{title}" name="title" placeholder="Blog post title">
                    <p class="help is-danger" th:if="${#fields.hasErrors('title')}" th:errors="*{title}">Incorrect
                        title</p>
                </div>
            </div>
            <div class="field">
                <label class="label">Content</label>
                <div class="control">
                        <textarea class="textarea" th:classappend="(${#fields.hasErrors('content')}? ' is-danger')"
                                  placeholder="Blog post content" th:field="*{content}" name="content"
                                  rows="20"></textarea>
                    <p class="help is-danger" th:if="${#fields.hasErrors('content')}" th:errors="*{content}">Incorrect
                        content</p>
                </div>
                <p class="help">You can write blog posts in <a href="https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/"
                target="_blank">AsciiDoc</a> or
                    <a href="https://help.github.com/en/github/writing-on-github" target="_blank">GitHub flavored Markdown</a> format.</p>
            </div>
            <div class="field is-grouped">
                <div th:if="${create}" class="control">
                    <button name="draft" value="true" type="submit" class="button is-primary">Create new Draft</button>
                </div>
                <div th:if="${edit}" class="buttons control">
                    <button name="draft" th:if="*{!draft}" value="false" type="submit" class="button is-primary">
                        Update
                    </button>
                    <button name="draft" th:if="*{draft}" value="true" type="submit" class="button is-primary">Save
                    </button>

                    <a th:href="${path}" th:if="*{draft}" target="_blank" class="button is-info"
                       role="button">Preview</a>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="field">
                <label class="label">Category</label>
                <div class="control">
                    <div class="select" th:classappend="(${#fields.hasErrors('category')}? ' is-danger')">
                        <select name="category" th:field="*{category}">
                            <option th:each="cat : ${categories}" th:value="${cat.id}" th:text="${cat.displayName}">
                                Category
                            </option>
                        </select>
                        <p class="help is-danger" th:if="${#fields.hasErrors('category')}" th:errors="*{category}">
                            Incorrect category</p>
                    </div>
                </div>
            </div>
            <div class="field">
                <label class="label">Format</label>
                <div class="control">
                    <div class="select" th:classappend="(${#fields.hasErrors('format')}? ' is-danger')">
                        <select name="format" th:field="*{format}">
                            <option th:each="format : ${formats}" th:value="${format.id}"
                                    th:text="${format.displayName}">
                                Format
                            </option>
                        </select>
                        <p class="help is-danger" th:if="${#fields.hasErrors('format')}" th:errors="*{format}">
                            Incorrect format</p>
                    </div>
                </div>
            </div>
            <div class="field">
                <label class="label">Publication Date</label>
                <input type="text" th:field="*{publishAt}" name="publishAt"
                       id="datetimepicker" class="input"
                       th:classappend="(${#fields.hasErrors('publishAt')}? ' is-danger')"
                       placeholder="2020-01-01 10:00" autocomplete="off"/>
                <p class="help is-danger" th:if="${#fields.hasErrors('publishAt')}" th:errors="*{publishAt}">
                    Incorrect date</p>
            </div>
            <div th:if="${edit}" class="control">
                <button name="draft" th:if="*{!draft}" value="true" type="submit" class="button is-warning">Unpublish
                </button>
                <button name="draft" th:if="*{draft}" value="false" type="submit" class="button is-warning">Publish now!
                </button>
            </div>
        </div>
    </div>
</form>
</body>
</html>
